<template>
  <view class="page">
    <view v-if="$data.info">
      <!-- 轮播图 -->
      <view v-if="$data.imgList.length">
        <up-swiper
          :list="$data.imgList"
          height="50vh"
          :radius="0"
          imgMode="scaleToFill"
          @click="onCheckImg"
        ></up-swiper>
      </view>
      <!-- 基本信息 -->
      <view class="basic">
        <view class="basic_collect" @tap="onCollect">
          <image
            :src="
              $data.info.collectStatus == collectStatus.not
                ? ImgIconCollectGray
                : ImgIconCollectGreen
            "
          />
          <view
            class="text-center text-nowarp"
            :style="[$data.info._collectConfig.textStyle]"
          >
            {{ $data.info._collectConfig.typeName }}
          </view>
        </view>
        <view class="basic_price">
          <text class="text-price">
            {{ $data.choseSku ? $data.choseSku._price : $data.info.showPrice }}
          </text>
          <text>起</text>
        </view>
        <view class="basic_name">
          {{ $data.info.title }}
        </view>
        <view class="basic_desc">{{ $data.info.intro }}</view>
        <view class="basic_tag" v-if="$data.info.serviceTagIds">
          <view
            class="basic_tag_item"
            v-for="(item, index) of $data.info.serviceTagNameArr"
            :key="index"
          >
            <image :src="ImgCheckGreen" />
            <text class="margin-left-xs">{{ item }}</text>
          </view>
        </view>
        <!-- 城市定位 -->
        <view class="basic_store" @tap="onLocation">
          <view class="basic_store-label">适用门店</view>
          <view class="basic_store-city">
            <view class="city-name u-line-1">
              {{ $data.LocationStorage.name }}
            </view>
            <view class="margin-left-xs">
              <up-icon name="arrow-right" color="#aaaaaa"></up-icon>
            </view>
          </view>
        </view>
      </view>
      <!-- 底部购买 -->
      <view class="foot foot_buy">
        <view class="foot_buy_left" @tap="() => ($data.csphoneShow = true)">
          <image :src="ImgIconKefuGray" />
          <view class="text-center text-nowarp">客服电话</view>
        </view>
        <view v-if="$data.isCanBuy" class="foot_buy_right" @tap="onBeforBuy">
          立即购买
        </view>
        <view v-else class="foot_buy_right__un"> 立即购买 </view>
      </view>
      <PopupTakeCoupon
        v-model:show="$data.couponShow"
        :list="$data.couponList"
        @take="onTake"
      />
      <PopupCSPhone v-model:show="$data.csphoneShow" title="官方客服电话" />
      <PopupSku
        v-model:show="$data.skuShow"
        :domesticServiceId="searchObj.domesticServiceId"
        :tips="$data.info.tips"
        :tikTokSkuId="$data.skuId"
        @choose="onChooseSku"
      />
    </view>
    <view v-else>
      <wakin-data-empty :message="$data.message">
        <view class="back-btn common_btn" @tap="onBack">返回首页</view>
      </wakin-data-empty>
    </view>
    <!-- 详情 -->
    <view v-show="$data.info" class="content">
      <!-- 评论 -->
      <view class="comment">
        <view class="comment_top">
          <view class="comment_top--left">评价({{ $data.commentTotal }})</view>
          <view class="comment_top--right" @tap="onToComment">
            <text>好评率{{ $data.commentGood }}%</text>
            <view class="margin-left-xs">
              <up-icon
                name="arrow-right"
                :color="BasicConfig.MainColor"
              ></up-icon>
            </view>
          </view>
        </view>
        <ListServiceComment ref="RefData" @total="onCommentTotal" />
      </view>
      <!-- 详情 -->
      <!-- <view v-show="$data.content" class="padding-"> -->
      <view class="text-center text-bold text-xl margin-tb">详情</view>
      <up-parse
        :content="$data.content"
        :loadingImg="ImgParseLoadingColor"
      ></up-parse>
      <!-- </view> -->
    </view>
    <!-- 金牌保洁 -->
    <view
      v-if="$data.goldWorkerList && $data.goldWorkerList.length > 0"
      class="content"
    >
      <view
        class="gold-worker-item"
        v-for="(item, index) of $data.goldWorkerList"
        :key="index"
      >
        <view class="top">
          <view class="img">
            <image :src="item._avatar" />
          </view>
          <view class="top-content">
            <view class="content-row">
              <view class="name">
                <view class="text-lg text-bold">{{ item.nickname }}</view>
                <view class="icon-img">
                  <image :src="ImgIconGoldWorkerYellow" mode="widthFix" />
                </view>
              </view>
              <view class="score">
                <up-rate
                  :count="5"
                  v-model="item.star"
                  :readonly="true"
                  :size="13"
                  :activeColor="BasicConfig.MainColor"
                ></up-rate>
              </view>
            </view>
            <view class="text-gray margin-top">
              <text class="margin-right-sm" v-if="item.expYear">
                {{ item.expYear }}年经验
              </text>
              <text class="margin-right-sm" v-if="item.sales">
                已接{{ item.sales }}单
              </text>
              <text v-if="item.distance"> {{ item.distance }}km </text>
            </view>
          </view>
        </view>
        <view class="middle" v-if="item.skillTag && item.skillTag.length > 0">
          <view
            class="tag"
            v-for="(tag, tagIndex) of item.skillTag"
            :key="tagIndex"
          >
            {{ tag }}
          </view>
        </view>
        <view class="bottom">
          <view class="recommend">
            <text class="text-gray" v-if="item.recommendWord">
              推荐语： {{ item.recommendWord }}
            </text>
          </view>
          <view class="common_btn" @tap="onCheckWorker(item)">选择劳动者</view>
        </view>
      </view>
    </view>
    <popupLogin />
    <!-- <PopupReason v-model:show="$data.reasonShow" /> -->
  </view>
</template>
  
  <script setup>
// import PopupReason from "./order/components/PopupReason.vue";
import { getCurrentInstance, reactive, ref, nextTick } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
} from "@dcloudio/uni-app";
import BasicConfig from "@/utils/config";
import { getServiceDetail, getServiceSku } from "../../api/Interface/service";
import {
  useGetLocationStorage,
  useGetUserStorage,
  useSetServiceShareStorage,
  useSetLocationStorage,
  useGetLnglatStorage,
} from "../../hooks/useStorage";
import errorCode from "../../utils/http/errorCode";
import {
  ImgCheckGreen,
  ImgIconCollectGray,
  ImgIconCollectGreen,
  ImgIconKefuGray,
  ImgIconRightGray,
  ImgParseLoadingColor,
  ImgIconGoldWorkerYellow,
} from "../../utils/iconMap";
import PopupTakeCoupon from "../components/PopupTakeCoupon.vue";
import { takeCoupnStatus, takeCoupnStatusConfig } from "../../enums/coupon";
import { couponCollection, getCoupon } from "../../api/Interface/coupons";
import { collectStatus, collectStatusConfig } from "../../enums/common";
import PopupCSPhone from "../../components/PopupCSPhone.vue";
import ListServiceComment from "../components/ListServiceComment.vue";
import PopupSku from "../components/PopupSku.vue";
import { eventBus } from "../../enums/eventBus";
import { jumpPage } from "../../utils/route/route";
import { useImgSrc } from "../../hooks/useImg";
import qs from "qs";
import {
  useGetAuthLocation,
  useGetFuzzyAddress,
  useGetLocationAddress,
} from "../../hooks/useLocation";
import { orderStatus, orderType } from "../../enums/order";
import { skuInputType } from "../../enums/sku";
import { useGetUserInfo } from "../../hooks/useUser";
import { useTTPlugin } from "../../hooks/useTT";
import { ttGoodsType } from "../../enums/douyin";
import { isDev } from "../../utils/env";
import { useRefundLog } from "../../hooks/useSystem";
import { logClassify } from "../../enums/system";
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  imgList: [],
  info: null,
  couponShow: false, // 领券弹窗
  couponList: [],
  csphoneShow: false, // 客服电话弹窗 cs : csutom service 缩写
  commentTotal: 0,
  commentGood: 0,
  skuShow: false, // 点击立即购买,弹出sku选择弹窗
  userInfo: {},
  skuId: "", // 抖音直播传过来的选择的skuId
  message: "数据加载中...",
  LocationStorage: null, // 用户缓存的地市信息
  reasonShow: true,
  chooseSkuList: [],
  isCanBuy: false, // 是否可购买
  buying: false, // 购买中 不可重复下单
  couponCode: null, // 抖音平台优惠券code
  choseSku: null, // 选择的sku 联动价格等
  goldWorkerList: [], // 金牌保洁列表
  workerId: null, // 选择的金牌阿姨workerId
  lat: null,
  lng: null,
});
const searchObj = reactive({
  domesticServiceId: "",
  is_picture: 0,
  page: 1,
  limit: 2,
});
const onCommentTotal = (e, p) => {
  $data.commentTotal = e;
  $data.commentGood = p;
  console.log("onCommentTotal", e, p);
};
/** 收藏/取消收藏 */
const onCollect = () => {
  const { collectStatus: _collectStatus } = $data.info;
  const status = _collectStatus == collectStatus.not ? 1 : 2;
  couponCollection({
    domesticServiceId: $data.info.domesticServiceId,
    status,
  }).then((res) => {
    if (res.code === errorCode.success) {
      $data.info.collectStatus =
        _collectStatus == collectStatus.not
          ? collectStatus.done
          : collectStatus.not;
      formatCollect();
    }
  });
};
/** 收藏/取消收藏状态变更 */
const formatCollect = () => {
  if (!$data.info) return;
  const config = collectStatusConfig[$data.info.collectStatus];
  $data.info._collectConfig = config ?? {
    value: collectStatus.not,
    typeName: "收藏",
    textStyle: {
      color: "#bbbbbb",
    },
  };
};
/** 领取优惠券 */
const onTake = (e, i) => {
  getCoupon({ couponId: e.couponId }).then((res) => {
    BasicConfig.toast(res.msg);
    if (res.code === errorCode.success) {
      $data.couponList[i].takeStatus = res.data.takeStatus;
      $data.couponList[i]._config =
        takeCoupnStatusConfig[$data.couponList[i].takeStatus];
    }
  });
};
const onBeforBuy = async () => {
  const { code: userCode } = await useGetUserInfo();
  if (userCode !== errorCode.success) return;
  const { code, data } = await getServiceSku({
    cityCode: $data.LocationStorage?.code ?? "2301",
    domesticServiceId: searchObj.domesticServiceId,
  });
  // 如果只有1个sku,则直接选择
  // 目前只考虑单选情况,不考虑有输入类型或者多选的sku
  if (code === errorCode.success && data.length === 1) {
    $data.chooseSkuList = data;
    onSave();
  } else {
    $data.skuShow = true;
  }
};
/** 选择sku回调 */
const onChooseSku = (id, skus, showPay) => {
  $data.chooseSkuList = skus;
  if (skus && skus.length > 0) $data.choseSku = skus[0];
  if (showPay) onSave();
  // console.log("skus", skus);
  // setTimeout(() => {
  //   uni.$emit(eventBus.service.confirm, skus);
  // }, 1000);
  // jumpPage({
  //   to: "/package-service/pages/order/confirm",
  //   query: {
  //     id: id,
  //   },
  // });
};
/** 结算 */
const onSave = async () => {
  if ($data.buying) {
    return;
  }
  const { code: userCode } = await useGetUserInfo();
  if (userCode !== errorCode.success) return;
  const can = uni.canIUse("createOrder");
  if (!can) {
    BasicConfig.toast("当前版本不支持创建订单，请升级到最新版本");
    return;
  }
  $data.buying = true;
  try {
    await getTTCoupon();
  } catch (e) {
    console.log("getTTCoupon catch", e);
  }
  BasicConfig.loadToast("创建订单...");
  const sku = $data.chooseSkuList[0];
  const { dyGoodsType } = sku;
  console.log("选择的sku", sku);
  let quantity = 1; // 数量
  if (sku.inputType == skuInputType.radio) {
    quantity = 1;
  }
  if (sku.inputType == skuInputType.input) {
    quantity = sku._value;
  }
  //   const goods = $data.info.DomesticService;
  // 透传字段
  const optinos = {
    // userAddressId: params.userAddressId,
    domesticServiceId: searchObj.domesticServiceId,
    domesticServiceSkuId: sku.domesticServiceSkuId,
    // firstStartServicedAt: $data.timeStamp, // params.firstStartServicedAt,
    hasRecorder: 1, // 是否允许开启工作记录仪 0.否 1.是
    life_trade_flag: 1, // 0：非融合链路（默认值）  1：走融合链路（标准融合/完全融合）
    dyProductId: sku.dyProductId,
    dyVersion: 1,
    cityCode: $data.LocationStorage?.code ?? "2301",
    workerId: $data.workerId,
  };
  const skuList = [
    {
      skuId: sku.dyProductId + "", // sku 商品Id 必传 string
      skuType: sku.inputType, // sku 商品类型 必传
      quantity, // 数量 必传
      price: Number(sku.dyPrice) * 100, // 价格 非商品库 sku 商品必传 number
      discountAmount: $data.discountInfo?.discountAmount,
      goodsInfo: {
        goodsName: $data.info.title, // 商品名称 必填
        goodsPhoto: $data.info._picurl, // 商品图片链接 必填
        goodsId: sku.dyProductId + "", // goods.domesticServiceId + "", // 商品ID 必填 string
        goodsType: orderType.service, // 商品类型 必填
        goodsLabels: $data.info.serviceTagNameArr, // 商品标签 非必填
        dateRule: "", // 使用规则 非必填
      },
      // extraInfo: {
      //   ticketName: "child", // 票种，非商品库门票类 sku 必传
      //   date: "2022-07-26", // 日期，非商品库门票类 sku 必传
      // },
    },
  ];
  const goodsList = [
    {
      quantity,
      price: Number(sku.dyPrice) * 100, // 价格 非商品库 sku 商品必传 number
      discountAmount: $data.discountInfo?.discountAmount,
      goodsName: $data.info.title, // 商品名称 必填
      goodsPhoto: $data.info._picurl, // 商品图片链接 必填
      goodsId: sku.dyProductId + "", // goods.domesticServiceId + "", // 商品ID 必填 string
      goodsType: orderType.service, // 商品类型 必填
    },
  ];
  const dyParams = {
    // skuList,
    // goodsList,
    payment: {
      totalAmount: Number(sku.dyPrice) * 100, // goods.totalPrice, // 订单总价 必填
      totalDiscountAmount: $data.discountInfo?.discountAmount, // 订单总折扣
    },
    callbackData: optinos, // 透传数据，开发者自定义字段 非必传
    tradeOption: optinos, // 透传数据，开发者自定义字段 非必传
    // // 折扣营销算价信息
    // // discountInfo: $data.discountInfo,
    // discountInfo: {
    //   type: $data.discountInfo?.type,
    //   detail: {
    //     orderDiscount: {
    //       orderTotalDiscountAmount: 0, // $data.discountInfo?.discountAmount,
    //       goodsTotalDiscountAmount: $data.discountInfo?.discountAmount,
    //       marketingInfo: $data.discountInfo ? [$data.discountInfo] : [],
    //     },
    //     goodsDiscount: [
    //       {
    //         goodsId: sku.dyProductId + "",
    //         skuId: sku.dyProductId + "",
    //         quantity,
    //         totalAmount: Number(sku.dyPrice) * 100,
    //         totalDiscountAmount: $data.discountInfo?.discountAmount,
    //         marketingInfo: $data.discountInfo ? [$data.discountInfo] : [],
    //       },
    //     ],
    //     itemDiscount: [
    //       {
    //         goodsId: sku.dyProductId + "",
    //         skuId: sku.dyProductId + "",
    //         quantity,
    //         totalAmount: Number(sku.dyPrice) * 100,
    //         totalDiscountAmount: $data.discountInfo?.discountAmount,
    //         marketingInfo: $data.discountInfo ? [$data.discountInfo] : [],
    //       },
    //     ],
    //   },
    // },
    // 折扣营销算价信息 ID（若同时存在 discountInfo 和 discountId 时，优先使用 discountId 对应的营销算价信息）
    // 注意：使用平台营销时，该字段不可用。
    // discountId: $data.discountInfo?.id,
    // callbackUrl: "https://test.qmgdj.com/api/pay/douYinPreOrderNotify", // 开发者自定义的预下单回调 URL(仅账号融合支持，完全融合不生效)
  };
  // 折扣营销算价信息
  if ($data.discountInfo) {
    dyParams.discountInfo = {
      type: $data.discountInfo?.type,
      detail: {
        orderDiscount: {
          orderTotalDiscountAmount: 0, // $data.discountInfo?.discountAmount,
          goodsTotalDiscountAmount: $data.discountInfo?.discountAmount,
          marketingInfo: $data.discountInfo ? [$data.discountInfo] : [],
        },
        goodsDiscount: [
          {
            goodsId: sku.dyProductId + "",
            skuId: sku.dyProductId + "",
            quantity,
            totalAmount: Number(sku.dyPrice) * 100,
            totalDiscountAmount: $data.discountInfo?.discountAmount,
            marketingInfo: $data.discountInfo ? [$data.discountInfo] : [],
          },
        ],
        itemDiscount: [
          {
            goodsId: sku.dyProductId + "",
            skuId: sku.dyProductId + "",
            quantity,
            totalAmount: Number(sku.dyPrice) * 100,
            totalDiscountAmount: $data.discountInfo?.discountAmount,
            marketingInfo: $data.discountInfo ? [$data.discountInfo] : [],
          },
        ],
      },
    };
  }
  if (dyGoodsType == ttGoodsType.group) {
    // delete dyParams.skuList;
    dyParams.goodsList = goodsList;
  } else {
    // delete dyParams.goodsList;
    dyParams.skuList = skuList;
  }
  console.log("预下单params", dyParams);
  uni.createOrder({
    ...dyParams,
    success: (res) => {
      console.log("预订单下单成功", res);
      uni.hideLoading();
      jumpPage({
        to: "/package-service/pages/order/confirm",
        mode: "reLaunch",
        query: {
          localNo: res.outOrderNo,
        },
      });
    },
    fail: (err) => {
      uni.hideLoading();
      console.log("预订单下单失败err", err);
			useRefundLog({
				obj: err,
				requestParams: dyParams,
				type: "uni.createOrder.fail",
				classify: logClassify.TTCreateOrder,
			})
      if (err.errMsg.includes("payment is cancelled")) {
        jumpPage({
          to: `/package-service/pages/order/order?status=${orderStatus.awaitPay}`,
          mode: "reLaunch",
        });
      } else {
        uni.showModal({
          content: `下单失败，请稍后重试！${[err?.errMsg || ""]}`,
          showCancel: false,
          confirmText: "知道了",
        });
        $data.buying = false;
      }
    },
  });
};
const onCheckImg = () => {};
/** 跳转评论页 */
const onToComment = () => {
  jumpPage({
    to: "/package-service/pages/comment",
    query: {
      domesticServiceId: searchObj.domesticServiceId,
    },
  });
};
const contact = (e) => {
  console.log("contact", e);
};
const im = (e) => {
  console.log("im", e);
};
const onBack = () => {
  uni.switchTab({
    url: "/pages/index/index",
  });
};
const RefData = ref();
/** 获取数据列表 */
const fnGetDatas = (type = $vm.$ListLoadEnum.load) => {
  RefData.value.loadDatas(type, searchObj);
};
/** 定位 */
const onLocation = async () => {
  await useGetLocationAddress();
  $data.LocationStorage = useGetLocationStorage();
  $data.cityName = $data.LocationStorage?.name;
  setTimeout(async () => {
    await init();
  }, 100);
};
/** 初始化数据 */
const init = async () => {
  $data.message = "数据加载中...";
  try {
    const cityCode = $data.LocationStorage?.code ?? "2301";
    const auth = await useGetAuthLocation();
    const { lat, lng } = !auth
      ? BasicConfig.dfLatLng
      : useGetLnglatStorage() || BasicConfig.dfLatLng;
    await getServiceDetail({
      cityCode,
      domesticServiceId: searchObj.domesticServiceId,
      lat,
      lng,
    })
      .then((res) => {
        if (res.code === errorCode.success) {
          $data.isCanBuy = true;
          const { picArr, videoUrl, content } = res.data;
          $data.content = content;
          $data.imgList = [videoUrl, ...picArr]
            .filter((item) => !!item)
            .map((m) => (m = useImgSrc(m)));
          $data.info = res.data;
          $data.info._coupon = null;
          $data.info._picurl = $data.imgList[0];
          formatCollect();
          if ($data.info.couponArr && $data.info.couponArr.length > 0) {
            $data.info._coupon = $data.info.couponArr[0];
            $data.couponList = $data.info.couponArr;
            $data.couponList.forEach((item) => {
              item._config = takeCoupnStatusConfig[item.takeStatus] ?? {
                value: takeCoupnStatus.untake,
                typeName: "未领取",
                btnStyle: {
                  color: "#ffffff",
                  background: BasicConfig.MainColor,
                },
              };
            });
          }
          $data.goldWorkerList = $data.info.goldWorker;
          $data.goldWorkerList.map((m) => (m._avatar = useImgSrc(m.avatar)));
        } else {
          $data.isCanBuy = false;
          $data.message = `暂未覆盖您所在区域，服务版图加速拓展中！[${cityCode}]`;
        }
      })
      .catch((err) => {
        $data.isCanBuy = false;
        $data.message = `暂未覆盖您所在区域，服务版图加速拓展中！c_[${cityCode}]`;
        useRefundLog({
          obj: err,
          requestParams: {
            cityCode,
            domesticServiceId: searchObj.domesticServiceId,
            lat,
            lng,
          },
          type: "catch",
          classify: logClassify.ProductDetail,
        });
      });
  } catch (e) {
    let msg = "";
    if (e) {
      msg = e.message || e.msg || e.error;
    }
    $data.message = `加载失败!\n[${JSON.stringify(e)}]\n[${msg}]`;
  }
};
const getTTCoupon = async () => {
  return new Promise((resolve) => {
    const NTT = useTTPlugin();
    const sku = $data.chooseSkuList[0];
    let quantity = 1; // 数量
    if (sku.inputType == skuInputType.radio) {
      quantity = 1;
    }
    if (sku.inputType == skuInputType.input) {
      quantity = sku._value;
    }
    NTT.computePromotion({
      goodsMarketingInfo: [
        {
          goodsId: sku.dyProductId + "",
          quantity,
          totalAmount: Number(sku.dyPrice) * 100,
        },
      ],
      needDefaultMarketing: true, // 需要返回默认优惠
      success: (success) => {
        console.log("获取抖音优惠券 success", success);
        // const { goodsMarketingList } = success;
        // if (goodsMarketingList && goodsMarketingList.length > 0) {
        //   // 商品维度选中的营销
        //   const { availableMarketing } = goodsMarketingList[0];
        //   if (availableMarketing && availableMarketing.length > 0) {
        //     const { couponInfo } = availableMarketing[0];
        //     if (couponInfo && couponInfo.length > 0) {
        //       // 优惠券code
        //       const { code } = couponInfo[0];
        //       $data.couponCode = code;
        //     }
        //   }
        // }
        const { calculationResult } = success;
        if (calculationResult) {
          const { goodsCalculationResultInfo } = calculationResult;
          if (
            goodsCalculationResultInfo &&
            goodsCalculationResultInfo.length > 0
          ) {
            const { marketingDetailInfo } = goodsCalculationResultInfo[0];
            if (marketingDetailInfo && marketingDetailInfo.length > 0) {
              // 排序 取优惠最大的
              const discountInfo = marketingDetailInfo.sort(
                (a, b) => b.discountAmount - a.discountAmount
              )[0];
              $data.discountInfo = discountInfo ?? {};
              console.log("优惠券discountInfo", $data.discountInfo);
            }
          }
        }
      },
      fail: (fail) => {
        console.log("获取抖音优惠券 fail", fail);
      },
      complete: (c) => {
        console.log("获取抖音优惠券 complete", c);
        resolve();
      },
    });
  });
};
const initLocation = async () => {
  $data.LocationStorage = useGetLocationStorage() || {
    name: "未获取定位",
    code: null,
  };
  const auth = await useGetAuthLocation();
  console.log("useGetAuthLocation", auth);
  if (!$data.LocationStorage?.code || !auth) {
    try {
      await useGetLocationAddress().then((res) => {
        console.log("走res");
        loadData();
      });
    } catch (error) {
      console.log("走catch");
      loadData();
    }
  } else {
    console.log("走已授权");
    loadData();
  }
};
const loadData = () => {
  setTimeout(async () => {
    $data.LocationStorage = useGetLocationStorage();
    $data.cityName = $data.LocationStorage?.name;
    await init();
  }, 100);
  nextTick(() => {
    fnGetDatas($vm.$ListLoadEnum.load);
  });
};
/** 选择劳动者 */
const onCheckWorker = (e) => {
  if (!e) return;
  $data.workerId = e.workerId;
  $data.skuShow = true;
  console.log("选择劳动者", e, $data.workerId);
};
onLoad((options) => {
  $data.buying = false;
  console.log("H5带入参数", options);
  let paramList = [];
  if (options.scene) {
    console.log("e.scene", options.scene);
    const obj = qs.parse(options.scene); // {q=1,1,1,57,1,50:""}
    console.log("e.scene obj", options.obj);
    paramList = Object.keys(obj)[0].split("=")[1].split(",");
  } else if (options && options.q) {
    console.log("e.q", options.q);
    paramList = options.q.split(",");
  }
  if (paramList && paramList.length > 0) {
    searchObj.domesticServiceId = paramList[0];
  }
  $data.userInfo = useGetUserStorage();
  console.log("userInfo", $data.userInfo);
  // 推荐官分享进入
  if (options.share_domesticServiceId) {
    const domesticServiceId = options.share_domesticServiceId;
    const userId = options.share_userId;
    searchObj.domesticServiceId = domesticServiceId;
    useSetServiceShareStorage({ domesticServiceId, userId });
  }
  // 直播间进入
  else {
    searchObj.domesticServiceId = options.id;
    $data.skuId = options.skuId;
    // if (options.skuId) $data.skuShow = true;
    // if (options.skuId) {
    // 	onBeforBuy()
    // }
  }
  console.log("服务详情 options", options);
  // init();
  initLocation();
  // nextTick(()=>{
  //    fnGetDatas($vm.$ListLoadEnum.load);
  // })
  // setTimeout(() => {
  //   fnGetDatas($vm.$ListLoadEnum.load);
  // }, 1000);
});
onReady(() => {
  // setTimeout(() => {
  //   fnGetDatas($vm.$ListLoadEnum.load);
  // }, 1000);
});
onShareAppMessage(() => {
  return {
    // path: `/pages/index/index?shareUserId=${userInfo.userId}`,
    path: `/package-service/pages/index?share_domesticServiceId=${
      searchObj.domesticServiceId
    }&share_userId=${$data.userInfo?.userId ?? ""}`,
  };
});
onShareTimeline(() => {
  return {
    path: `/package-service/pages/index?share_domesticServiceId=${
      searchObj.domesticServiceId
    }&share_userId=${$data.userInfo?.userId ?? ""}`,
    query: `share_domesticServiceId=${params.domesticServiceId}&share_userId=${
      $data.userInfo?.userId ?? ""
    }`,
  };
});
</script>
  
  <style lang="scss" scoped>
.page {
  background: #f7f8fa;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 200rpx;
  .basic {
    padding: 30rpx;
    position: relative;
    background: #ffffff;
    &_collect {
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      top: 30rpx;
      right: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 50%;
        height: 50%;
      }
    }
    &_price {
      color: $main-color;
      text {
        &:first-child {
          font-size: 44rpx;
        }
        &:nth-of-type(2) {
          margin-left: 6rpx;
          font-size: 30rpx;
        }
      }
    }
    &_name {
      color: #111111;
      font-size: 38rpx;
      margin: 30rpx 0;
    }
    &_desc {
      color: #666666;
      font-size: 34rpx;
    }
    &_tag {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin: 40rpx 0;
      &_item {
        display: flex;
        align-items: center;
        color: $main-color;
        margin-right: 30rpx;
        margin-bottom: 20rpx;
        image {
          width: 30rpx;
          height: 30rpx;
          border-radius: 100%;
        }
        text {
          // margin-bottom: 6rpx;
          font-size: 30rpx;
        }
      }
    }
    &_coupon {
      background: #f7f8fa;
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      &_left {
        display: flex;
        align-items: center;
        .label {
          font-size: 30rpx;
          // font-weight: 700;
        }
        .coupon_box {
          padding: 10rpx 0;
          background: $main-color;
          color: #ffffff;
          font-size: 32rpx;
          border-radius: 15rpx;
          position: relative;
          display: flex;
          align-items: center;
          margin-left: 30rpx;
          &_left {
            width: calc(100% - 80rpx);
            text-align: center;
            padding: 0 20rpx;
            view {
              max-width: 260rpx;
            }
          }
          &_right {
            width: 80rpx;
            border-left: 1px dashed #ffffff;
            text-align: center;
          }
          $roundWidth: 20rpx;
          $roundHeight: 12rpx;
          $roundRight: 70rpx;
          .round_top {
            width: $roundWidth;
            height: $roundHeight;
            position: absolute;
            background: #ffffff;
            right: $roundRight;
            top: 0;
            border-radius: 0 0 100rpx 100rpx;
          }
          .round_bottom {
            width: $roundWidth;
            height: $roundHeight;
            position: absolute;
            background: #ffffff;
            right: $roundRight;
            bottom: 0;
            border-radius: 100rpx 100rpx 0 0;
          }
        }
      }
      &_right {
        width: 14rpx;
        height: 24rpx;
        display: flex;
        align-items: center;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    &_store {
      padding: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f7f8fa;
      border-radius: 15rpx;
      &-label {
        color: #1a1a1a;
      }
      &-city {
        color: #aaaaaa;
        display: flex;
        align-items: center;
        .city-name {
          width: 300rpx;
          text-align: right;
        }
      }
    }
  }
  .content {
    margin-top: 30rpx;
    background: #ffffff;
    .comment {
      &_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        &--left {
          font-size: 34rpx;
        }
        &--right {
          display: flex;
          align-items: center;
          color: $main-color;
          font-size: 34rpx;
        }
      }
    }
  }

  $footLeftWidth: 100rpx;
  .foot_buy {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: #ffffff;
    &_left {
      width: $footLeftWidth;
      height: $footLeftWidth;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      image {
        width: 60%;
        height: 60%;
      }
      view {
        font-size: 26rpx;
      }
    }
    &_right {
      width: calc(100% - $footLeftWidth);
      background: $main-color;
      margin-left: 30rpx;
      color: #ffffff;
      text-align: center;
      padding: 30rpx;
      border-radius: 100rpx;
      z-index: 999;
      font-size: 34rpx;
    }
    &_right__un {
      width: calc(100% - $footLeftWidth);
      background: #f0f0f0;
      margin-left: 30rpx;
      color: #aaaaaa;
      text-align: center;
      padding: 30rpx;
      border-radius: 100rpx;
      z-index: 999;
      font-size: 34rpx;
    }
  }
  .back-btn {
    margin: auto;
    margin-top: 60rpx;
    padding: 20rpx;
  }
}
.gold-worker-item {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  .top {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .img {
      width: 130rpx;
      height: 130rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
      }
    }
    .top-content {
      width: calc(100% - 130rpx);
      padding-left: 30rpx;
      .content-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name {
          display: flex;
          align-items: center;
          .icon-img {
            width: 130rpx;
            // height: 50rpx;
            margin-left: 30rpx;
            margin-top: 8rpx;
            image {
              width: 100%;
              // height: 100%;
            }
          }
        }
        .score {
        }
      }
    }
  }
  .middle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 20rpx;
    .tag {
      border: 1px solid var(--main-color);
      background: #ffffff;
      color: var(--main-color);
      margin-right: 20rpx;
      border-radius: 100rpx;
      padding: 3rpx 10rpx;
      margin-bottom: 10rpx;
      font-size: 30rpx;
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    .recommend {
      padding-right: 50rpx;
      width: calc(100% - 260rpx);
    }
    .common_btn {
      width: 260rpx;
      padding: 20rpx;
    }
  }
}
</style>
  